<template>
  <div class="box">
    <div class="excelTitle">
      <el-button @click="exportExcel">导出Excel</el-button>运营数据统计
    </div>
    <div class="excelTime">日期：{{reportData.reportDate}}</div>
    <table class="exceTable" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="4" class="headBody">会员数据统计</td>
      </tr>
      <tr>
        <td width='20%' class="tabletrBg">新增会员数</td>
        <td width='30%'>{{reportData.todayNewMember}}</td>
        <td width='20%' class="tabletrBg">总会员数</td>
        <td width='30%'>{{reportData.totalMember}}</td>
      </tr>
      <tr>
        <td class="tabletrBg">本周新增会员数</td>
        <td>{{reportData.thisWeekNewMember}}</td>
        <td class="tabletrBg">本月新增会员数</td>
        <td>{{reportData.thisMonthNewMember}}</td>
      </tr>
      <tr>
        <td colspan="4" class="headBody">预约到诊数据统计</td>
      </tr>
      <tr>
        <td class="tabletrBg">今日预约数</td>
        <td>{{reportData.todayOrderNumber}}</td>
        <td class="tabletrBg">今日到诊数</td>
        <td>{{reportData.todayVisitsNumber}}</td>
      </tr>
      <tr>
        <td class="tabletrBg">本周预约数</td>
        <td>{{reportData.thisWeekOrderNumber}}</td>
        <td class="tabletrBg">本周到诊数</td>
        <td>{{reportData.thisWeekVisitsNumber}}</td>
      </tr>
      <tr>
        <td class="tabletrBg">本月预约数</td>
        <td>{{reportData.thisMonthOrderNumber}}</td>
        <td class="tabletrBg">本月到诊数</td>
        <td>{{reportData.thisMonthVisitsNumber}}</td>
      </tr>
      <tr>
        <td colspan="4" class="headBody">热门套餐</td>
      </tr>
      <tr class="tabletrBg textCenter">
        <td>套餐名称</td>
        <td>预约数量</td>
        <td>占比</td>
        <td>备注</td>
      </tr>
      <tr v-for="s in reportData.hotSetmeal">
        <td>{{s.name}}</td>
        <td>{{s.setmeal_count}}</td>
        <td>{{s.proportion}}</td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        reportData: {
          reportDate: null,
          todayNewMember: 0,
          totalMember: 0,
          thisWeekNewMember: 0,
          thisMonthNewMember: 0,
          todayOrderNumber: 0,
          todayVisitsNumber: 0,
          thisWeekOrderNumber: 0,
          thisWeekVisitsNumber: 0,
          thisMonthOrderNumber: 0,
          thisMonthVisitsNumber: 0,
          hotSetmeal: [
            /*{name:'阳光爸妈升级肿瘤12项筛查（男女单人）体检套餐',setmeal_count:200,proportion:0.222},
            {name:'阳光爸妈升级肿瘤12项筛查体检套餐',setmeal_count:200,proportion:0.222}*/
          ]
        }
      }
    },
    created() {
      this.$ajax.get("/report/getBusinessReportData").then((res) => {
        if (res.flag) {
          this.reportData = res.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    methods: {
      exportExcel() {
        window.location.href = '/report/exportBusinessReport';
      }
    }
  }
</script>

<style>
  .excelTitle{
  	text-align: center;
  	overflow: hidden;
  	line-height: 40px;
  }
  .excelTitle .el-button{
  	float: left;
  }
  .excelTime{
  	padding: 10px 0;
  	text-align: right;
  }
  .exceTable{
  	width: 100%;
  	border-right: 1px solid #e6e6e6;
  	border-bottom: 1px solid #e6e6e6;
  	font-size: 14px;
  	color: #333;
  }
  .exceTable tr,.exceTable td{
  	border-left: 1px solid #e6e6e6;
  	border-top: 1px solid #e6e6e6;
  	height: 40px;
  	line-height: 40px;
  	padding: 0 10px;
  }
  .exceTable .headBody{
  	text-align: center;
  	font-weight: 700;
  	font-size: 14px;
  }
</style>
